<template>
  <el-form :inline="true" class="user-search" size="small" :model="query">
    <el-form-item label="学员姓名">
      <el-input v-model="query.name" placeholder="学员姓名" clearable />
    </el-form-item>
    <el-form-item label="班级类型">
      <el-select v-model="query.classType" clearable placeholder="班级类型">
        <el-option v-for="item in classTypes" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="query.mine" label="我的学员" border checked @change="onMineClicked" v-permission="['ADMIN', 'ROLE_STUDY_ADVISOR_MAN']"/>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="query.almostFinish" label="课时耗尽" border @change="onCouseFinish"/>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="query.noClass" label="待分班" border @change="onNoClass"/>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="query.finishCourse" label="已结业" border @change="onFinishCourse"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      classTypes: this.$store.getters.classTypes
    }
  },
  methods: {
    toQuery() {
      this.$parent.page = 1
      this.$parent.init()
    },
    onMineClicked() {
      this.$emit("onMineClicked", this.query.mine)
    },
    onCouseFinish() {
      this.$emit("onCouseFinish", this.query.almostFinish)
    },
    onNoClass() {
      this.$emit("onNoClass", this.query.noClass)
    },
    onFinishCourse() {
      this.$emit("onFinishCourse", this.query.finishCourse)
    }
  }
}
</script>

<style scoped>
.el-checkbox.is-bordered.el-checkbox--small {
  padding: 7px 15px 7px 10px;
}
/* /deep/ .el-checkbox__inner {
  border-radius: 0;
  background-color:#A8A8A8;
}
/deep/ .el-checkbox {
  color: #a8a8a8;
} */
/* /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #7BBB99;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #7BBB99;
  border-color: #7BBB99;
}
/deep/ .el-checkbox.is-bordered.is-checked {
  border-color: #7BBB99;
} */
</style>
